<template>
  <div class="login">
        <el-container class="container">
            <el-header class="header">
                    <div class="nav">
                      <img src="../assets/mouse.png" alt="">
                      <h2 class="contact">MOUSE</h2>
                    </div>
                    <h4 class="title">Specialized data sets of alleles and corresponding phenotypes in genetically modified mice</h4>
            </el-header>
             <el-container>
             <el-main>
             <h2 class="data">data statistics</h2>
             <div class="up">
             </div>
             <h2 class="data">function modules</h2>
             <div class="down">
             <el-button class="button" round @click="onSubmit1">gene category</el-button>
             <el-button class="button" round @click="onSubmit2">category_allele</el-button>
             <el-button class="button" round @click="onSubmit3">gene_homology</el-button>
             <el-button class="button" round @click="onSubmit4">gene allele</el-button>
             <el-button class="button" round @click="onSubmit5">double alleles</el-button>
             <el-button class="button" round @click="onSubmit6">gene composition</el-button>
             <el-button class="button" round @click="onSubmit7">double alleles_gene allele</el-button>
             <el-button class="button" round @click="onSubmit8">gene composition_reference</el-button>
             <el-button class="button" round @click="onSubmit9">gene category_gene composition</el-button>
             <el-button class="button" round @click="onSubmit10">mouse_reference</el-button>
             <el-button class="button" round @click="onSubmit11">disease</el-button>
             <el-button class="button" round @click="onSubmit12">gene composition_double alleles</el-button>
             <el-button class="button" round @click="onSubmit13">phenotype</el-button>
             <el-button class="button" round @click="onSubmit14">reference</el-button>
             <el-button class="button" round @click="onSubmit15">user</el-button>
             <el-button class="button" round @click="onSubmit16">gene_reference</el-button>
             <el-button class="button" round @click="onSubmit17">mouse</el-button>
             </div>
             </el-main>
             </el-container>
        </el-container>
  </div>
</template>

<script setup>
import router from '../router'

const onSubmit1 = () => {
 router.push('/GeneCategory')
}
const onSubmit2 = () => {
 router.push('/Category_Allele')
}
const onSubmit3 = () => {
 router.push('/Gene_Homology')
}
const onSubmit4 = () => {
 router.push('/GeneAllele')
}
const onSubmit5 = () => {
 router.push('/DoubleAlleles')
}
const onSubmit6 = () => {
 router.push('/GeneComposition')
}
const onSubmit7 = () => {
 router.push('/DoubleAlleles_GeneAllele')
}
const onSubmit8 = () => {
 router.push('/GeneComposition_Reference')
}
const onSubmit9 = () => {
 router.push('/GeneCategory_GeneComposition')
}
const onSubmit10 = () => {
 router.push('/Mouse_Reference')
}
const onSubmit11 = () => {
 router.push('/Disease')
}
const onSubmit12 = () => {
 router.push('/GeneComposition_DoubleAlleles')
}
const onSubmit13 = () => {
 router.push('/Phenotype')
}
const onSubmit14 = () => {
 router.push('/Reference')
}
const onSubmit15 = () => {
 router.push('/User')
}
const onSubmit16 = () => {
 router.push('/Gene_Reference')
}
const onSubmit17 = () => {
 router.push('/Mouse')
}


</script>

<style scoped>

.container{
  height: 100%;
  width: 100%;
}

.contact{
font-weight:400px;
margin-right: 20px;
text-shadow:0px 5px 9px rgba(0,0,0,.3);
color: #FBFCFD;
}

.header {
height:90px;
width:100%;
background-color:#476586;
display: flex;
}

.nav {
font-size:20px;
display: flex;
align-items: center;
}
.nav img{
margin-right: 20px;
}

.title{
color: #FBFCFD;
text-shadow: 0px 5px 9px rgba(0,0,0,.3);
margin-top: 55px;
}

.data{
color: #0C4469;
font-size:36px;
text-shadow: 0px 5px 9px rgba(0,0,0,.3);
margin-left:20px;
}

.up{
width:1490px;
height:200px;
margin:auto;
border-bottom: 2px dashed #BBBBBB;
}

.down{
width:1400px;
height:250px;
margin:30px auto 0px;
padding-top:10px;
text-align: center;
}

.button{
background-color:#93D2F3;
margin-bottom:30px;
width: auto;
height: 50px;
padding: 10 20px;
text-align: center;
justify-content: center;
align-items: center;
border-radius: 3em;
box-shadow: 0px 5px 9px rgba(0,0,0,.3);
font-family: inherit;
cursor: pointer;
font-size: 20px;
color:#FFF;
text-shadow: 0px 5px 9px rgba(0,0,0,.3);
}


</style>
